<!-- 县域医保基金占比 -->
<template>
    <div id="medicalInsurance"></div>
</template>
<script>
import * as echarts from "echarts";
import { getInsuranceData } from "../../commonJs/data";
import Mock from 'mockjs'
export default {
    data() {
        return {};
    },
    mounted() {
        this.setEcharts();
    },
    methods: {
        //设置echarts
        setEcharts() {
            var scaleData = [
                {
                    name: "人民医院",
                    value: 0,
                },
                {
                    name: "二院",
                    value: 0,
                },
                {
                    name: "中医院",
                    value: 0,
                },
                {
                    name: "妇幼保健",
                    value: 0,
                },
                {
                    name: "乡镇卫生院",
                    value: 0,
                },
            ];
            const responseData = new Array(5).fill(0).map(() => Mock.Random.float(50, 70, 2, 3));
            responseData.forEach((item, index) => {
                scaleData[index].value = parseInt(
                    // item.VALUE1.substring(0, item.VALUE1.length - 1)
                    item
                );
            });

            let medicalInsurance = echarts.init(
                document.getElementById("medicalInsurance")
            );

            var placeHolderStyle = {
                normal: {
                    label: {
                        show: false,
                    },
                    labelLine: {
                        show: false,
                    },
                    color: "rgba(0, 0, 0, 0)",
                    borderColor: "rgba(0, 0, 0, 0)",
                    borderWidth: 0,
                },
            };

            var data = [];
            var color = ["#00ffff", "#00cfff", "#006ced", "#ffe000", "#ffa800"];
            for (var i = 0; i < scaleData.length; i++) {
                data.push(
                    {
                        value: scaleData[i].value,
                        name: scaleData[i].name,
                        itemStyle: {
                            normal: {
                                borderWidth: 20,
                                shadowBlur: 80,
                                borderColor: color[i],
                                shadowColor: color[i],
                            },
                        },
                    },
                    {
                        value: 100,
                        name: "",
                        itemStyle: placeHolderStyle,
                    }
                );
            }
            var seriesObj = [
                {
                    name: "",
                    type: "pie",
                    clockWise: false,

                    radius: [40, 70],
                    hoverAnimation: false,
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                position: "outside",
                                color: "#fff",
                                fontSize: 16,
                                formatter: function (params) {
                                    if (params.name !== "") {
                                        return (
                                            params.name +
                                            "\n{white|" +
                                            "占比" +
                                            params.value +
                                            "%}"
                                        );
                                    } else {
                                        return "";
                                    }
                                },
                                rich: {
                                    white: {
                                        color: "#fff",
                                        align: "center",
                                        padding: [3, 0],
                                        fontSize: 16,
                                    },
                                },
                            },
                            labelLine: {
                                length: 30,
                                length2: 50,
                                show: true,
                                color: "#00ffff",
                            },
                        },
                    },
                    data: data,
                },
            ];
            let option = {
                tooltip: {
                    show: false,
                },
                legend: {
                    show: false,
                },
                toolbox: {
                    show: false,
                },
                series: seriesObj,
            };
            medicalInsurance.setOption(option);
        },
    },
};
</script>
<style lang="scss" scoped>
#medicalInsurance {
    width: 100%;
    height: 100%;
}
</style>